<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>WISSC轮滑教培服务网-查询系统</title>
    <#assign base=request.contextPath  />
    <link rel="icon" href="${base}/favicon.ico">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link rel="stylesheet" href="${base}/frame/layui/css/layui.css?t=1534970980648" media="all">
    <script type="text/javascript" src="${base}/js/feng.js"></script>
    <script src="${base}/frame/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="${base}/js/ztree/jquery-1.4.4.min.js"></script>
    <script src="${base}/js/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="${base}/css/hzw-city-picker.css">
    <script type="text/javascript" src="${base}/js/city-data.js"></script>
    <script type="text/javascript" src="${base}/js/hzw-city-picker.min.js"></script>
    <script type="text/javascript" src="${base}/js/city-zk.js"></script>
    <script type="text/javascript" src="${base}/js/province.js"></script>
    <style type="text/javascript">
        form {
            padding: 10px;
        }

        .layui-btn-radius {
            border-radius: 3px;
        }
    </style>
    <script>
        var defaults = {
            s1: 'provid',
            s2: 'cityid',
            s3: 'areaid',
            v1: null,
            v2: null,
            v3: null
        };
    </script>
</head>
<body>
<form class="layui-form" id="myform" style="margin-top: 10px">

    <div class="layui-form-item">
        <label class="layui-form-label"><a style="color:red">*</a>&nbsp;姓名</label>
        <div class="layui-input-inline">
            <input name="name" id="name" lay-verify="required" autocomplete="off" class="layui-input isNull"
                   type="text ">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label"><a style="color:red">*</a>&nbsp;性别</label>
        <div class="layui-input-block">
            <input type="radio" name="sex" value="1" title="男" checked>
            <input type="radio" name="sex" value="2" title="女">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label"><a style="color:red">*</a>&nbsp;身份证号</label>
        <div class="layui-input-inline">
            <input name="idNumber" id="idNumber" lay-verify="required" autocomplete="off" class="layui-input isNull"
                   type="text">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><a style="color:red">*</a>&nbsp;注册时间</label>
        <div class="layui-input-inline">
            <input name="regTime" id="regTime" lay-verify="required" autocomplete="off" class="layui-input isNull"
                   type="text">
        </div>
    </div>


    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label"><a style="color:red">*</a>&nbsp;选择地区</label>
            <div class="layui-input-inline">
                <select name="provid" id="provid" lay-filter="provid" lay-verify="required" class="isNull">
                    <option value="">请选择国家</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-inline">
                <select name="cityid" id="cityid" lay-filter="cityid" lay-verify="required">
                    <option value="">请选择省</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-inline">
                <select name="areaid" id="areaid" lay-filter="areaid" lay-verify="required">
                    <option value="">请选择市</option>
                </select>
            </div>
        </div>
    </div>

    <div style="width: 350px;   margin: 10px; ">
        <span class="layui-icon layui-icon-add-circle" onclick="a()"
              style="color: white;background-color: #0092EF;padding: 10px 15px;border-radius: 3px; "
              id="YGW">添加信息</span>&nbsp;&nbsp;&nbsp;&nbsp;
    </div>
    <br>
    <div id="demo"></div>

    <div class="layui-form-item" style="margin: 10px">
        <button class="layui-btn" lay-submit lay-filter="formDemo" type="button"
                onclick="onSubmit()" style="background-color: #0092EF;">立即提交
        </button>
        <button type="reset" onclick="resetText()" class="layui-btn layui-btn-primary">重置</button>
    </div>
</form>

<script>
    function resetText() {
        document.getElementById("myform").reset();
    }
</script>

<script>
    var cityPicker = new HzwCityPicker({
        data: data,
        target: 'cityChoice',
        valType: 'k',
        hideCityInput: {
            name: 'city',
            id: 'city'
        },
        hideProvinceInput: {
            name: 'areaId',
            id: 'areaId',
            val: 'q'
        },
        callback: function () {
        }
    });

    cityPicker.init();

    layui.use(['form', 'layedit', 'laydate', 'layer'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate;


        //执行一个laydate实例
        laydate.render({
            elem: '#regTime' //指定元素
        });
        laydate.render({
            elem: '#data' //指定元素
        });
    });


    //添加
    var pIds;

    function onSubmit() {

        for (var i = 0; i < idFlag; i++) {
            var demoImage = "demoImage" + i;
            if (document.getElementById(demoImage)) {
                if ($("#demoImage" + i).text() == null || $("#demoImage" + i).text() == "" || $("#demoImage" + i).text() == undefined) {
                    layer.msg('<span style="color:red; ">请上传图片</span>')
                    return;
                }
            }
        }


        if (!isNull()) {
            return;
        }
        var aa = "";
        for (var i = 0; i < idFlag; i++) {

            var subject = subject + i;
            var subjectLevel = subjectLevel + i;
            var idNo = idNo + i;
            subject = $("#subject" + i).val();
            subjectLevel = $("#subjectLevel" + i).val();
            idNo = $("#idNo" + i).val();
            aa += subject + "," + subjectLevel + "," + idNo + "@";
        }
        if (aa == "") {
            layer.msg('<span style="color:red; ">请添加信息</span>')
            return;
        }


        var provid = $("#provid").val()
        var cityid = $("#cityid").val();
        var areaid = JSON.stringify($("#areaid").val());
        var str = areaid.replace(/^\"|\"$/g, '');
        var sum = provid + "/" + cityid + "/" + str + "/";
        var jsonData = {};
        jsonData.name = $("#name").val();
        jsonData.idNumber = $("#idNumber").val();
        jsonData.sex = $('input:radio[name="sex"]:checked').val();
        jsonData.regTime = (new Date($('#regTime').val())).getTime();
        jsonData.subject = $("#subject").val();
        jsonData.city = sum;
        jsonData.subjectLevel = $("#subjectLevel").val();
        jsonData.number = $("#number").val();
        $.ajax({
            type: "POST", //提交方式
            traditional: true,//这里设置为true,不然后台接收到的参数会带上[]，导致数据无法正常接收
            url: "${base}/student/studentInsert",//路径
            data: {pIds: fileIds, param1: JSON.stringify(jsonData), param2: aa},
            success: function (data) {//返回数据根据结果进行相应的处理
                data = JSON.parse(data)
                if (data.flag === true) {
                    layer.msg("添加成功,请到学员信息查询模块查询.")
                    setTimeout(function(){
                        window.location.href = "${base}/student/student_add.html"
                    },1500)
                } else {
                    layer.msg(data.msg)
                }
            }
        });

    }

    var idFlag = 0;

    function a() {
        for (var i = 0; i < 1; i++) {
            $("#demo").append('<div id="count' + idFlag + '">' +
                '<div class="layui-form-item">' +
                '<div class="layui-inline">' +
                '<label class="layui-form-label"><a style="color:red">*</a>&nbsp;科目选择</label>' +
                '<div class="layui-input-inline" >' +
                '<select name="subject" lay-verify="required" id="subject' + idFlag + '" class="  isNull">' +
                '    <option value="">请选科目</option>' +
                '    <option value="1">基础滑轮</option>' +
                '    <option value="2">速度滑轮</option>' +
                '    <option value="3">自由式滑轮</option>' +
                '    <option value="4">轮滑球</option>' +
                '    <option value="5">极限滑轮</option>' +
                '    <option value="6">陆地滑雪(滑轮)</option>' +
                '    </select>' +
                '    </div>' +
                '    </div>' +
                '    <div class="layui-inline">' +
                '    <label class="layui-form-label"><a style="color:red">*</a>&nbsp;等级选择</label>' +
                '<div class="layui-input-inline">' +
                '    <select name="subjectLevel" lay-verify="required"  id="subjectLevel' + idFlag + '" class=" isNull">' +
                '    <option value="">请选等级</option>' +
                '                <option value="1">1级</option>' +
                '                <option value="2">2级</option>' +
                '                <option value="3">3级</option>' +
                '                <option value="4">4级</option>' +
                '                <option value="5">5级</option>' +
                '                <option value="6">6级</option>' +
                '                <option value="7">7级</option>' +
                '                <option value="8">8级</option>' +
                '                <option value="9">9级</option>' +
                '                <option value="10">10级</option>' +
                '</select>' +
                '</div>' +
                '</div>' +
                '<div class="layui-inline">' +
                ' <label class="layui-form-label"><a style="color:red">*</a>&nbsp;证件编号</label>' +
                '<div class="layui-input-inline">' +
                ' <input name="idNo" id="idNo' + idFlag + '"  lay-verify="required"   autocomplete="off" class="layui-input isNull" type="text">' +
                '</div>' +
                '</div>' +
                '</div>' +
                '<div class="layui-form-item" style="margin: 10px">' +
                '<div class="layui-upload">' +
                '<input style="display:none" type="file" onchange="MyUpload(' + idFlag + ' )" id="file' + idFlag + '"/>' +
                '        <button type="button" onclick="clickFile(' + idFlag + ')" class="layui-btn" id="test' + idFlag + '" style="background-color: #0092EF;margin: 10px">上传证书</button><br>' +
                '        <blockquote class="layui-elem-quote layui-quote-nm" style="width: 600px;height: 60px;float: left">' +
                '            证书文件：' +
                '            <div class="layui-upload-list " id="demoImage' + idFlag + '" ></div>' +
                '        </blockquote>' +
                '<button style="background-color: #e7141a;margin-left: 10px" type="button"  class="layui-btn" onclick="deleteA(' + idFlag + ')" >删除</button>' +
                '    </div>' +
                ' </div> ' +
                '</div>'
            );
            form.render();
            idFlag += 1;
        }
    }

    //删除赛事经历
    function deleteA(flag) {
        $("#count" + flag).remove();

    }


    function clickFile(flag) {
        $("#file" + flag).click();
    }

    var fileIds = [];

    function MyUpload(flag) {
        var fd = new FormData();
        fd.append("file", $('#file' + flag)[0].files[0]);
        fd.append("subject", $("#subject" + flag).val());
        fd.append("subjectLevel", $("#subjectLevel" + flag).val());
        fd.append("idNo", $("#idNo" + flag).val());
        //上传文件ajax
        $.ajax({
            async: false,
            cache: false,
            type: "post",
            data: fd,
            url: '/student/upload',
            contentType: false, //必须
            processData: false, //必须
            success: function (res) {
                fileIds.push(res.data.fileId)
                $('#demoImage' + flag).html($('#file' + flag).val())
            }
        })
    }
</script>
</body>
</html>
